<!--会员界面-->
<template>
  <div class="all" @viewappear="viewappear">

    <template v-if="data">
      <scroller class="all bg2">
        <div>

          <!-- 上拉背景 -->
          <div class="up-bg bg2"></div>

          <!-- 头部 -->
          <div class="acenter main1">
            <div class="head-vip" v-if="isVip">
              <LImage class="img-head" :src="Config.img('jinbg.png')"></LImage>

              <div class="img-tx">
                <LImage class="img-tx absolute" :src="Config.img('touxiang.png')"></LImage>
                <LImage class="img-tx" v-if="avatar" :src="avatar"></LImage>
              </div>

              <div class="width30"></div>
              <div>
                <div class="row acenter">
                  <text class="font26 color-hui">{{data.nickName}}</text>
                  <LImage class="img-vip" :src="Config.img('vip.png')"></LImage>
                </div>

                <div class="height10"></div>
                <text class="font28 color-hui">{{T("有效期至") + data.deadline}}</text>
              </div>
            </div>
            <div class="head" v-else>
              <LImage class="img-head" :src="Config.img('lanbg.png')"></LImage>

              <div class="img-tx">
                <LImage class="img-tx absolute" :src="Config.img('touxiang.png')"></LImage>
                <LImage class="img-tx" v-if="avatar" :src="avatar"></LImage>
              </div>

              <div class="width30"></div>
              <div>
                <text class="font26 main-t1">{{data.nickName}}</text>
                <div class="height10"></div>
                <text class="font28 main-t1">{{T("您还不是VIP会员用户")}}</text>
              </div>
            </div>
          </div>

          <!-- 标题 -->
          <LImage class="img-hudu" :src="Config.img('hudu.png')"></LImage>
          <div class="title bg2">
            <LImage class="img-zy" :src="Config.img('yuansu.png')"></LImage>
            <div class="width30"></div>
            <text class="font34 text2">{{T("VIP专属特权")}}</text>
            <div class="width30"></div>
            <LImage class="img-zy" :src="Config.img('yuansu.png')"></LImage>
          </div>

          <!-- 列表 -->
          <div class="list bg2">

            <div class="list-title">
              <text class="font30 color-shui tCenter all">{{T("权益描述")}}</text>
              <text class="font30 color-shui tCenter all">{{T("注册用户")}}</text>
              <text class="font30 color-shui tCenter all">{{T("VIP会员")}}</text>
            </div>

            <div class="list-content bg3">

              <template v-for="(item, index) in list">

                <div class="cell" v-bind:key="index">
                  <text class="font26 text2 tCenter all">{{item.title}}</text>

                  <div class="line-column bg4"></div>
                  <div class="acenter all">
                    <LImage class="img-value" v-if="item.user == '@'" :src="Config.img('√.png')"></LImage>
                    <LImage class="img-value" v-else-if="item.user == '#'" :src="Config.img('x.png')"></LImage>
                    <text class="font26 text2 tCenter all" v-else>{{item.user}}</text>
                  </div>

                  <div class="line-column bg4"></div>
                  <div class="acenter all">
                    <LImage class="img-value" v-if="item.vip == '@'" :src="Config.img('√.png')"></LImage>
                    <LImage class="img-value" v-else-if="item.vip == '#'" :src="Config.img('x.png')"></LImage>
                    <text class="font26 text2 tCenter all" v-else>{{item.vip}}</text>
                  </div>
                </div>

                <div class="line-row bg4" v-if="index < list.length-1" v-bind:key="'line'+index"></div>
              </template>
            </div>
          </div>

          <!-- 提示 -->
          <div class="tips bg2">
            <text class="font24 text3">{{'* ' + T("会员服务为虚拟服务，购买成功后立即生效，暂不支持退款，敬请谅解！")}}</text>
          </div>
        </div>
      </scroller>

      <div class="line-row bg4"></div>
      <div class="foot bg2">
        <div class="foot-code" @click="exchangeClick">
          <text class="font32 text2">{{T("兑换码")}}</text>
        </div>
        <div class="foot-buy main-bt1" @click="buyClick">
          <text class="font32 text1">{{(isVip ? T("立即续费") : T("立即开通"))}}</text>
        </div>
      </div>
    </template>
  </div>
</template>

<style src="@/_css/style.css" ></style>
<style scoped>
.absolute{
  position:absolute;
}
.all4 {
  flex: 4;
}
.all3 {
  flex: 3;
}
.all2 {
  flex: 2;
}

/*********** 头部*/
.head {
  flex-direction: row;
  align-items: center;
  background-color: #DEE7FF;
  background-image:unset;
  width: 690px;
  height: 160px;

  border-top-left-radius: 24px;
  border-top-right-radius: 24px;

  padding-left: 30px;
  padding-right: 30px;

  margin-top: 20px;
}
.head-vip {
  flex-direction: row;
  align-items: center;
  background-image:linear-gradient(to right, #FFF1E0, #FFD7A8);
  width: 690px;
  height: 160px;

  border-top-left-radius: 24px;
  border-top-right-radius: 24px;

  padding-left: 30px;
  padding-right: 30px;

  margin-top: 20px;
}
.img-tx {
  width: 100px;
  height: 100px;
  border-radius: 100px;
}
.color-hui{
  color: #BB7F32;
}
.img-head{
  position:absolute;
  width: 690px;
  height: 160px;
}
.img-vip {
  width: 64px;
  height: 25px;
  margin-left: 10px;
}

/*********** 标题*/
.title {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding-top: 34px;
  padding-bottom: 34px;
}
.img-hudu{
  width: 750px;
  height: 18px;
  margin-top: -18px;
}
.img-zy{
  width: 29px;
  height: 39px;
}

/*********** 表格*/
.list {
  padding-left: 20px;
  padding-right: 20px;
}
.list-title{
  flex-direction: row;
  align-items: center;
  background-color: #FBCF9B;
  height: 72px;

  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
}
.list-content {
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
}
.cell {
  flex-direction: row;
  align-items: center;
}
.line-column {
  width: 1px;
  height: 97px
}
.line-row {
  height: 1px;
}
.color-shui{
  color: #99621D;
}
.img-value{
  width: 26px;
  height: 26px;
}

/*********** 提示*/
.tips {
  padding-top: 40px;
  padding-bottom: 60px;
  padding-left: 20px;
  padding-right: 20px;
}

/*********** 上啦背景*/
.up-bg{
  position:absolute;
  left: 0;
  right: 0;
  bottom: -500;
  height: 500px;
}

/*********** 底部*/
.foot {
  flex-direction: row;

  padding-right: 40px;
  padding-top: 20px;
  padding-bottom: 60px;
}
.foot-buy {
  flex-direction: row;
  justify-content: center;
  align-items: center;

  min-width: 520px;
  height: 80px;
  border-radius: 12px;
}
.foot-code{
  flex: 1;
  justify-content: center;
  align-items: center;
  height: 80px;
}
</style>

<script>
import jnavigator from "@/_js/navigator";
import jmodal from "@/_js/modal";
import jmath from "@/_js/math";
import jconfig from "@/_js/config";
import jhttps from "@/_js/https";
import jtime from "@/_js/time";
import broadcast from "@/_js/broadcast";

const weexFunction = weex.requireModule("WeexFunction");

import I18N from "@/_i18n/i18n";
var T = I18N.t;
weexFunction.setTitle(T('会员'));

export default {
  
  data() {
    return {
      T: T,
      Config: jconfig,
      avatar: undefined, //头像

      isVip:false, //turn VIp
      buy_price: undefined, //价格

      list:[
        {'title':T("模拟策略交易"), 'user':'1个', 'vip':'1 ' + T('个')},

        {'title':T("共享服务器"), 'user':'@', 'vip':T('1台(5个策略位)')},

        {'title':T("单策略投资上限"), 'user':'@', 'vip':'10W USDT'},

        {'title':T("VIP策略"), 'user':'@', 'vip':'7 ' + T('个')}

        // {'title':T("策略执行位"), 'user':'@', 'vip':T("10个")}
      ],
      oneShow: false,
      data: undefined,
    };
  },

  created() {

    var param = weex.config;
    this.avatar = param.avatar;

    this.httpVipInfo();
    broadcast.subscribe('Vip', broadcast.VIP_BUY_OK,()=>{
      weexFunction.debugLog('购买会员成功---------')
      this.httpVipInfo();
    });
  },

  methods: {

    initData(data) {

      data.deadline = jtime.getTime(data.deadline, 'y/M/d'); //到期时间

      data.vtnAmount = jmath.gfMoney(data.vtnAmount, false);

      this.isVip = (data.member != "LV0");

      this.buy_price = jmath.cheng(data.memberPrice, data.discount, 2,true);

      return data;
    },

    /*************************************************通信触发*/
    //完全显示
    viewappear() {
      if (this.oneShow){
        this.httpVipInfo();
      }
      this.oneShow = true;
    },

    
    /********************************** HTTP*/
    //https获取Vip信息
    httpVipInfo() {
      var param = {};
      jhttps.postX("systemV2/queryMemberDetail", param, true, (data)=>{

        if(data.status == 200){
          data = data.data;
          this.data = this.initData(data);
        } else{
          jmodal.toast(data.msg);
        }
      });
    },

    //https兑换
    httpVipExchange(value) {
      
      jmodal.showLoad();
      var param = {'couponNumber':value};
      jhttps.postX("activity/exchangeCoupon", param, true, (data)=>{
      jmodal.hideLoad();
        if(data.status == 200){
          jmodal.toast(T('兑换成功'));
          this.httpVipInfo();
        } else{
          jmodal.toast(data.msg);
        }
      });
    },

    /********************************** 点击*/
    //购买VIP
    buyClick() {

      weexFunction.debugLog('进来了')
      var param = {'isVip':this.isVip};
      jnavigator.openDialog("mine/VipBuy", param);

      //2023.2.15 老版本购买会员
      // weexFunction.buyVip(1, (flag)=>{
      //   if(flag){
      //     this.httpVipInfo();
      //   }
      // });
    },

    //兑换
    exchangeClick() {
      var param = {'title':T("兑换福利"),
                   'placeholder':T("请输入兑换码")};
      jmodal.prompt(param, (value)=>{
        if (!value.length) {
          jmodal.toast(T('输入不能为空'));
          return;
        };
        this.httpVipExchange(value);
      });
    },
  },
};
</script>
